<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script type="text/javascript">
    let origin = []
    // SVG尺寸
    var w = 1920
    var h = 800

    // 数据
    // var dataset = [5, 10, 15, 20, 25]
    var dataSet = [
      { x: 10, y: 50, width: 20, height: 20, name: 'A1' },
      { x: 60, y: 50, width: 20, height: 20, name: 'A2' },
      { x: 110, y: 50, width: 20, height: 20, name: 'A3' },
      { x: 160, y: 50, width: 20, height: 20, name: 'A4' },
      { x: 210, y: 50, width: 20, height: 20, name: 'A5' },
    ]

    // 创建SVG容器
    var svg = d3
      .select('body')
      .append('svg')
      // .attr('width', w)
      // .attr('height', h)
      .attr('viewBox', [0, 0, w, h])
    const g = svg.append('g').attr('cursor', 'grab')

    g.selectAll('text')
      .data(dataSet)
      .enter()
      .append('text')
      .text((d) => d.name)
      .attr('x', (d) => d.x + (d.width - 18) / 2)
      .attr('y', (d) => d.y + d.height + 14)
      .attr('font-size', `14px`)
      .attr('fill', 'black')

    // 创建圆
    var rects = g.selectAll('rect').data(dataSet).enter().append('rect')

    // 根据数据设置每个圆的属性
    rects
      .attr('x', (d) => d.x)
      .attr('y', (d) => d.y)
      .attr('width', (d) => d.width)
      .attr('height', (d) => d.height)
      .attr('fill', 'green')

    rects
      .on('mouseover', function () {
        d3.select(this).transition().duration(200).attr('fill', 'red')
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .delay(200)
          .duration(200)
          .attr('fill', 'green')
      })
      .on('dblclick', function () {
        console.log(d3.event)
        const rect = d3.select(this)
        const x1 = Number(rect.attr('x')) + Number(rect.attr('width')) / 4
        const y1 = Number(d3.select(this).attr('y'))
        const x2 = Number(rect.attr('x')) + Number(rect.attr('width')) / 4
        const y2 = Number(rect.attr('y')) - Number(rect.attr('height')) * 4
        origin.push({ x: x1, y: y1 })
        origin.push({ x: x2, y: y2 })
        // console.log(d3.select(this).attr('x'))
        // console.log(d3.select(this).attr('width'))
        if (origin.length == 4) {
          g.append('polyline')
            // .attr('x1', origin[0].x)
            // .attr('y1', origin[0].y)
            // .attr('x2', origin[1].x)
            // .attr('y2', origin[1].y)
            .attr(
              'points',
              `${origin[0].x},${origin[0].y} ${origin[1].x},${origin[1].y} ${origin[3].x},${origin[3].y} ${origin[2].x},${origin[2].y}`
            )
            .attr('stroke', 'blue')
            .attr('stroke-width', '1px')
            .attr('fill', 'none')
          origin = []
        }
      })
    // .call(
    //   d3
    //     .drag()
    //     .on('start', dragstarted)
    //     .on('drag', dragged)
    //     .on('end', dragended)
    // )

    svg
      .call(
        d3
          .zoom()
          .extent([
            [0, 0],
            [w, h],
          ])
          .scaleExtent([0.1, 8])
          .on('zoom', zoomed)
      )
      // 关闭双击缩放
      .on('dblclick.zoom', null)
    // g.node()

    // function dragstarted() {
    //   d3.select(this).raise()
    //   g.attr('cursor', 'move')
    // }

    // function dragged(d) {
    //   d3.select(this)
    //     .attr('x', (d.x = d3.event.x))
    //     .attr('y', (d.y = d3.event.y))
    // }

    // function dragended() {
    //   g.attr('cursor', 'default')
    // }

    function zoomed() {
      g.attr('transform', d3.event.transform)
    }
  </script>
</html>
